<template>
    <view>
        <a-drawer v-model:visible="visible" title="历史草稿" placement="top">
            <a-table :columns="columns" :data-source="tableData" :pagination="false">
                <template #bodyCell="{ column, record }">
                    <template v-if="column.key === 'ID'">
                        <a @click="copyFormId(record.id)">
                            {{ record.id }}
                            <CopyOutlined></CopyOutlined>
                        </a>
                    </template>
                    <template v-else-if="column.key === 'title'">
                        <view>{{ JSON.parse(record.formJsonStr)?.bookName }}</view>
                    </template>

                    <template v-else-if="column.key === 'action'">
                        <span>
                            <a @click="useDraft(record)">使用</a>
                            <a-divider type="vertical" />
                            <a @click="deleteDraft(record)">删除</a>          
                        </span>
                    </template>

                </template>
            </a-table>
            <a-divider />
            <a-row>
                <a-col :span="20"></a-col>
                <a-col :span="4">
                    <a-pagination v-model:current="queryParams.pageNum" :total="total" show-less-items @change="getList" />
                </a-col>
            </a-row>
          
        </a-drawer>
    </view>
</template>
<script setup>
const { copy, isSupported } = useClipboard();
import { mergeWith } from 'lodash-es';
import { queryList,deleteOne } from '@/custom/nepu/api/draft';
import useUserStore from '@/store/modules/user';
const userStore = useUserStore();
import useApp from '@/hooks'
const { $ } = useApp();

import { SmileOutlined, DownOutlined, CopyOutlined } from '@ant-design/icons-vue';
import dayjs from 'dayjs';
const columns = [
    {
        dataIndex: 'name',
        key: 'ID',
        title: '表单ID'
    },
    {
        title: '著作名称',
        key: 'title',
    },
    {
        title: '创建日期',
        key: 'createdTime',
        dataIndex: 'createdTime',
    },
    {
        title: '操作',
        key: 'action'
    },

];

const tableData = ref([])
const total = ref(0)
const queryParams = ref({
    pageSize: 5,
    pageNum: 1,
    createUserId: userStore.userId,
    formId:'著作'
})
const emit = defineEmits(['update:show','confirm','update:form'])
const props = defineProps({
    form:{
        type:Object
    },
    show: {
        type: Boolean
    }
})
const visible = computed({
    get: () => props.show,
    set: (val) => {
        //console.log(val)
        emit('update:show', val)
    }
});
// 获取列表
function getList() {
    queryList(queryParams.value).then(res => {
        tableData.value = res.content;
        total.value = res.totalElements;
    })
}
// 复制
function copyFormId(e) {
    copy(e)
    $.showToast({
        title: '表单ID已复制',
        icon: 'success'
    })
}
// 使用草稿
function useDraft(item){
    let formJsonStr = item.formJsonStr;
    let t = JSON.parse(formJsonStr);
    //console.log(obj)
    let obj = mergeWith(props.form,t,(value1,value2)=>{
        if(value1 != value2){
            return value2
        }
    })
   // obj.publicationTime = dayjs(obj.publicationTime,'YYYY-MM-DD')
    emit('update:form',obj)
    //emit('confirm',obj)
    emit('update:show',false)
}
// 删除草稿
function deleteDraft(item){
    deleteOne(item.id).then(res=>{
        $.showToast({
            title:'删除成功',
            icon:'success'
        })
        getList()
    })
}
getList();
</script>